<template>
	<div style="display: flex;flex-direction: column;" class="otherPage centreOfExcellence talentConcept">
		<Header :selected="8"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="1" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg"
				style="min-height: 600px; display: flex; align-items: center;justify-content: center; ">
				<el-row class="el-container" type="flex" justify="space-around">
					<el-col :xs="12" :sm="12" :md="13" :lg="13" class="talentConceptImage">

						<div style="height: 100%;" class="swiper-container" ref="newsSwiper" id="newsSwiper">
							<div style="height: 100%;" class="swiper-wrapper">
								<div style="height: 100%;" @click="goToDetail(slide.id)" class="swiper-slide"
									v-for="(slide, index) in data.coverImageList" :key="index">
									<div class="slide-content">
										<img class="talentConceptChildImage" :src="$request.getImgUrl()+slide.fileUrl"
											alt="Slide" style="object-fit: cover; " />
									</div>
	 
								</div> 
							</div>
							<div style="border: 1px solid red	;height: 100px;" class="swiperagination"
								ref="talentConceptSwiperPagination" id="talentConceptSwiperPagination"></div>

						</div>
						<!-- <img :src="data.coverImage" class="talentConceptChildImage" style="" /> -->
					</el-col>
					<el-col :xs="12" :sm="12" :md="11" :lg="11" class="talentConceptContentArea"
						style="min-width: 360px;margin: 0 auto;padding-left: 10px;">
						<div class="talentModule">
							<div class="talent_icon_bg iconCare">
							</div>
							<div style="width: 300px;display: flex;flex-direction: column;">
								<div class="talentTitle">{{data.titleOne}}</div>
								<div class="talentContent">{{data.contentOne}}</div>
							</div>
						</div>
						<div class="dividerArea">
							<el-divider direction="vertical" content-position="left"></el-divider>
						</div>
						<div class="talentModule">
							<div class="talent_icon_bg iconImprove">

							</div>
							<div style="width:300px;display: flex;flex-direction: column;">
								<div class="talentTitle">{{data.titleTwo}}</div>
								<div class="talentContent">{{data.contentTwo}}</div>
							</div>
						</div>
						<div class="dividerArea">
							<el-divider direction="vertical" content-position="left"></el-divider>
						</div>
						<div class="talentModule">
							<div class="talent_icon_bg iconAttach">

							</div>
							<div style="width: 300px;display: flex;flex-direction: column;">
								<div class="talentTitle">{{data.titleThree}}</div>
								<div class="talentContent">{{data.contentThree}}</div>
							</div>
						</div>

					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		centreOfExcellenceMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: centreOfExcellenceMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('centreOfExcellence'),
						to: '/centreOfExcellence'
					},
					{
						label: this.$t('talentConcept'),
						to: '/talentConcept'
					}
				],
				hoverIndex: -1,
				data: {
					content: ""
				}

			};
		},
		computed: {},
		created() {},
		mounted() {
			this.bindBg();
			this.bindTalentConcept().then(res => {
				this.initSwiper();
			});
		},
		methods: {
			initSwiper() {
				let that = this;
				that.swiper = new Swiper(that.$refs.newsSwiper, {
					direction: 'horizontal',
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 0,
					effect: 'slide',
					lazy: {
						loadPrevNext: true,
					},
					pagination: {
						el: that.$refs.talentConceptSwiperPagination,
						clickable: true,
						renderBullet: function(index, className) {
							return '<span style="width:10px; height:10px;margin:0 4px;background-color:#fff" class="' +
								className + '"> </span>';
						},
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},

				});
			},
			/**
			 * (1)	获取人才理念内容
			 */
			bindTalentConcept() {

				let params = {};
				let that = this;
				return new Promise((resolve, reject) => {
					that.$request.getTalentConcept(params).then(res => {
						this.data = res.data
						this.loading = false;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			/**
			 * (1)	获取人才理念顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getTalentConceptTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/centreOfExcellence/centreOfExcellence.css");

	.talentConceptArea {
		width: 1000px;
		margin: 0 auto;
		display: flex;
	}

	.talentConceptImgArea {
		width: 600px;
		height: 380px;
		/* margin-right: 20px; */

	}

	.talentConceptContent {
		width: 400px;
		padding-left: 30px;
		padding-top: 8px;
		height: 380px;
	}

	.talentConceptChildImage {
		max-width: calc(380px * 720 / 520);
		max-height: 100%;
		height: 100%;
		object-fit: fill;
		margin-right: 10px;
	}

	.talentModule {
		display: flex;
		width: 100%;
	}

	.talent_icon_bg {
		width: 50px;
		height: 50px;
		background: #FFFFFF;
		box-shadow: 2px 2px 5px 0px rgba(41, 41, 41, 0.19);
		border-radius: 50%;
		margin-top: 5px;
	}

	.iconCare {
		background-image: url('../../assets/icons/icon_care.png');
		background-size: 42px;
		background-repeat: no-repeat;
		background-position: center;
	}

	.iconImprove {
		background-image: url('../../assets/icons/icon_improve.png');
		background-size: 36px 36px;
		background-repeat: no-repeat;
		background-position: center;
	}

	.iconAttach {
		background-image: url('../../assets/icons/icon_attach.png');
		background-size: 36px 36px;
		background-repeat: no-repeat;
		background-position: center;
	}

	.talentConcept .el-divider--vertical {
		height: 6em;
		max-height: calc((380px - 210px) / 2);
		/* margin: 8px 0px; */
	}

	.dividerArea {
		padding-left: 20px;
	}

	.talentTitle {
		font-size: 1.5em;
		font-weight: 530;
		padding-left: 10px;
		margin-bottom: 10px;
	}

	.talentContent {
		font-size: 1em;
		opacity: 0.6;
		padding-left: 10px;
		white-space: nowrap;

	}

	.talentConceptImage {
		max-height: 380px;
		text-align: right;
		margin: 0 auto;
		padding-right: 10px;
	}

	.content_bg {
		padding: 0;
		margin: 0 auto;
	}

	.talentConcept .swiper-container .enterpriseNewstitle {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 530;
		color: #FFF;
		font-size: 1em;
		width: 100%;
		padding: 0px 60px 0px 10px;
		height: 40px;
		line-height: 40px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 9999;
	}

	.talentConcept .enterpriseNewsslideOpacityBg {
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 99;
		background-color: black;
		opacity: 0.5;
	}


	.talentConcept #enterprisesNewsSwiperPagination {
		position: absolute;
		right: 0px;
		bottom: 12px;
		width: 15%;
		z-index: 999999;
	}

	#enterprisesNewsSwiperPagination .swiper-pagination-bullet {
		border-radius: 2.5px;
		width: 30% !important;
		height: 5px;
		background: #FFF !important;
		opacity: 0.6 !important;
	}


	#enterprisesNewsSwiperPagination .swiper-pagination-bullet-active {
		/* background-color: #0484D7; */
	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
			padding: 50px;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}

	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
			padding: 50px;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
			padding: 50px;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
			padding: 50px;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}

		.content_bg {
			width: calc(2120px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
			padding: 50px;
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}

		/* .talentConceptImage,
		.talentConceptChildImage {
			max-width: calc(1920px * 13 / 24 * 0.7);
			width: calc(1920px * 13 / 24 * 0.7);
			max-height: calc(1920px * 13 / 24 * 0.7 * 520 / 720);
			height: calc(1920px * 13 / 24 * 0.7 * 520 / 720);
		}

		.talentConceptContentArea {
			height: max-content;
		}

		.talentConcept .el-divider--vertical {
			height: calc((1920px * 13 / 24 * 0.7 * 520 / 720 - 210px) / 2);
		} */

	}

	@media (max-width: 1720px) {
		.content_bg {
			width: calc(1720px * 0.8);
			padding: 50px;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
			padding: 50px;
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.el-container {
			display: flex;
			flex-direction: row;
		}

	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}

		.el-container {
			display: flex;
			flex-direction: row;
			width: calc(1120px * 0.7);
		}

		.talentConceptImage,
		.talentConceptChildImage {
			max-width: calc(350px * 720 / 520);
			width: calc(350px * 720 / 520);
			height: 350px;
		}

		.talentConceptContentArea {
			height: max-content;
		}

		.talentConcept .el-divider--vertical {
			height: calc((350px - 210px) / 2);
		}
	}

	@media (max-width: 1024px) {
		.el-container {
			display: flex;
			flex-direction: column;
		}

		.talentTitle {
			font-size: 18px;
		}

		.talentConceptImage,
		.talentConceptChildImage {
			max-width: calc(768px * 0.6);
			width: calc(768px * 0.6);
			height: calc(768px * 0.6 * 520 / 720);
			border-radius: 8px 9px 0px 0px;
		}
	}

	@media (max-width: 900px) {
		.talentConceptImage {
			max-width: calc(720px * 0.4);
			width: calc(720px * 0.4);
			height: calc(520px * 0.4);
		}

		.talentContent {
			font-size: 12px;
		}

		.talentTitle {
			font-size: 18px;
		}

		.talentConceptImage,
		.talentConceptChildImage {
			max-width: calc(768px * 0.5);
			width: calc(768px * 0.5);
			height: calc(768px * 0.5 * 520 / 720);
			border-radius: 8px 9px 0px 0px;
		}
	}

	@media (max-width: 768px) {

		.talentConceptArea {
			width: 100%;
			flex-direction: column;
		}

		.talentConceptImgArea {
			width: 100%;
			height: auto;
			margin-right: 20px;
		}

		.talentConceptContent {
			width: 100%;
			padding: 10px;
		}

		.talentTitle {
			font-size: 18px;
		}

		.talentConceptImage,
		.talentConceptChildImage {
			max-width: calc(768px * 0.5);
			width: calc(768px * 0.5);
			height: calc(768px * 0.5 * 520 / 720);
			border-radius: 8px 9px 0px 0px;
		}

	}

	@media (max-width: 440px) {

		.talentConceptImage,

		.talentConceptImage .swiper-container .swiper-slide{
			max-width: calc(430px * 0.8);
			width: calc(430px * 0.7);
			height: calc(430px * 0.7 * 520 / 720);
			border-radius: 8px 9px 0px 0px;
		}
		.talentConceptChildImage {
			max-width: calc(430px * 0.8);
			width: 100%;
			height: calc(430px * 0.7 * 520 / 720);
			border-radius: 8px 9px 0px 0px;
		}
		.talentTitle {
			font-size: 18px;
		}

		.talentModule {
			margin-top: 10px;
		}
	}
</style>